<template>
  <div>
    <!-- 面包屑 -->
    <el-breadcrumb separator="/">
      <el-breadcrumb-item :to="{ path: '/index/home' }"
        >首页</el-breadcrumb-item
      >
      <el-breadcrumb-item>文章管理</el-breadcrumb-item>
      <el-breadcrumb-item>文章新增列表</el-breadcrumb-item>
    </el-breadcrumb>
    <!-- 卡片 -->
    <el-card class="box-card">
      <!-- from表单 -->
      <el-form ref="form" :model="articleForm" label-width="80px">
        <!-- 标题 -->
        <el-form-item label="标题">
          <el-input v-model="articleForm.title"></el-input>
        </el-form-item>
        <!-- 文章类型 -->
        <!-- 内容 --- 富文本编辑器 -->
        <!-- 内容 --- 视频上传按钮 -->
        <el-form-item label="类型">
          <!-- 
                lebel用于设置radio的value的值
                因此，articleForm.type和label属性双向绑定在一起
             -->
          <el-radio v-model="articleForm.type" :label="1">文章</el-radio>
          <el-radio v-model="articleForm.type" :label="2">视频</el-radio>
        </el-form-item>

        <el-form-item label="类型">
          <!-- 文章上传 -->
          <VueEditor
            v-if="articleForm.type == 1"
            :config="config"
            ref="vueEditor"
          />
          <!-- 视频上传 -->
          <!-- 
              action//上传文件接口地址
on-remove	文件列表移除文件时的钩子
on-success	文件上传成功时的钩子
limit	最大允许上传个数
on-exceed	文件超出个数限制时的钩子
           -->
          <el-upload
            v-else
            class="upload-demo"
            :action="axios.defaults.baseURL + '/upload'"
            :on-remove="handleRemove"
            :on-success="videoSuccess"
            :file-list="fileList"
            :limit="1"
            :on-exceed="handleExceed"
            :headers="{ Authorization: token }"
          >
            <el-button size="small" type="primary">点击上传</el-button>
            <div slot="tip" class="el-upload__tip">只能上传视频文件</div>
          </el-upload>
        </el-form-item>
        <!-- 栏目列表 -->
        <el-form-item label="栏目">
          <el-checkbox
            :indeterminate="isIndeterminate"
            v-model="checkAll"
            @change="handleCheckAllChange"
            >全选</el-checkbox
          >
          <div style="margin: 15px 0"></div>
          <el-checkbox-group
            v-model="articleForm.categories"
            @change="CheckedChange"
          >
            <el-checkbox
              v-for="item in category"
              :key="item.id"
              :label="item.id"
              >{{ item.name }}</el-checkbox
            >
          </el-checkbox-group>
        </el-form-item>
        <!-- 封面 -->
        <el-form-item label="封面">
          <el-upload
            :action="axios.defaults.baseURL + '/upload'"
            :headers="{ Authorization: token }"
            multiple
            list-type="picture-card"
            :on-exceed="coverExceed"
            :on-remove="coverRemove"
            :on-success="coverSuccess"
            :limit="3"
            :file-list="articleForm.cover"
          >
            <i class="el-icon-plus"></i>
          </el-upload>
        </el-form-item>
        <!-- 发表文章按钮 -->
        <el-button type="success" @click="sendArticle">发布文章</el-button>
      </el-form>
    </el-card>
  </div>
</template>

<script>
import request from "@/utils/request";
import VueEditor from "vue-word-editor";
import "quill/dist/quill.snow.css";
import { category } from "@/api/category";
import { addArticle, articleDetail, post_update } from "@/api/article";
export default {
  components: {
    VueEditor,
  },
  data() {
    return {
      articleForm: {
        title: "", // 标题
        type: 1, // 类型，1表示文章，2表示视频
        categories: [], //选中的栏目列表
        cover: [], //保存的封面
        content: "", //内容
      },
      config: {
        // 上传图片的配置
        uploadImage: {
          url: request.defaults.baseURL + "/upload",
          headers: {
            Authorization: localStorage.getItem("hm-toutiao_token"),
          },
          name: "file",
          // res是结果，insert方法会把内容注入到编辑器中，res.data.url是资源地址
          uploadSuccess(res, insert) {
            insert(request.defaults.baseURL + res.data.data.url);
          },
        },
      },
      token: localStorage.getItem("hm-toutiao_token"),
      fileList: [],
      axios: request,
      content: "", //上传的视频内容
      isIndeterminate: false, // 全选按钮的状态，true表示不确定状态
      checkAll: false, // 是否全选
      checkedCategory: [], // 选中的选项
      category: [], // 栏目列表
    };
  },
  created() {
    //请求栏目列表
    category().then((res) => {
      //  原数据，关注和头条  不参与选中
      this.category = res.data.data.slice(2);
    });
    //点击编辑跳过来的
    if (this.$route.query.id) {
      //文章详情
      articleDetail(this.$route.query.id).then((res) => {
        console.log(155, res);
        //搞定了标题和类型的展示
        this.articleForm = res.data.data;
        //展示内容
        var quill = this.$refs.vueEditor.editor;
        quill.clipboard.dangerouslyPasteHTML(0, this.articleForm.content);
        //栏目的展示
        this.articleForm.categories = this.articleForm.categories.map(
          (item) => {
            return item.id;
          }
        );
        //封面的展示
        this.articleForm.cover.map((item) => {
          return (item.url = request.defaults.baseURL + item.url);
        });
      });
    }
  },
  methods: {
    //封面
    //封面上传成功时触发
    coverSuccess(response) {
      //   console.log(156, response);
      response.data.url = request.defaults.baseURL + response.data.url;
      this.articleForm.cover.push(response.data);
    },
    //移除封面时触发
    coverRemove(file) {
      //   let id = file.response.data.id;
      let id = (file.response && file.response.data.id) || file.id;
      this.articleForm.cover = this.articleForm.cover.filter((item) => {
        return item.id != id;
      });
    },
    //等上传的文件大于规定的数量时触发
    coverExceed() {
      this.$message.warning("封装最大上传3张");
    },
    // 点击小选框触发的函数
    CheckedChange(data) {
      //   console.log(data);
      if (data.length == this.category.length) {
        this.isIndeterminate = false;
        this.checkAll = true;
      } else {
        this.checkAll = false;
        this.isIndeterminate = true;
      }

      if (data.length == 0) {
        this.isIndeterminate = false;
      }
    },
    //点击全选触发的函数
    handleCheckAllChange(val) {
      //   console.log(val);
      this.isIndeterminate = false;
      //把栏目列表中的所有数据的id复制给categories数组
      if (val) {
        this.articleForm.categories = this.category.map((item) => {
          return item.id;
        });
      } else {
        this.articleForm.categories = [];
      }
    },
    //上传成功的钩子
    videoSuccess(response, file, fileList) {
      console.log(109, response, file, fileList);
      this.content = response.data;
    },
    // 上传的文件超出规定数量的时候触发
    handleExceed() {
      this.$message.warning("只允许上传一个视频！");
    },
    // 移除视频时触发
    handleRemove() {
      // 清空内容
      this.content = "";
    },
    // 发布文章
    sendArticle() {
      console.log(this.articleForm);
      //quill就是获取到富文本编辑器里面的内容
      if (!this.articleForm.title) {
        this.$message.warning("标题不能为空！");
        return;
      }
      // 获取富文本编辑器里面的内容
      if (this.articleForm.type == 1) {
        var quill = this.$refs.vueEditor.editor.root.innerHTML;
        // 富文本编辑器，内容为空的时候也会有一个换行符，因此不能直接判断内容为空
        // 如何判断？富文本编辑器提供了一个方法getLength方法，当getLength方法返回1的时候
        // 说明富文本编辑器内容为空.
        if (this.$refs.vueEditor.editor.getLength() === 1) {
          this.$message.warning("文章不能为空！");
          return;
        }
        this.articleForm.content = quill;
      } else {
        if (!this.content) {
          this.$message.warning("视频不能为空");
          return;
        }
        this.articleForm.content = this.content.url;
        //发表视频，只需要视频的链接即可
      }
      //栏目
      if (this.articleForm.categories.length == 0) {
        this.$message.warning("至少选择一个栏目！");
        return;
      } else {
        //传栏目id的时候需要包装成对象形式给后台
        this.articleForm.categories = this.articleForm.categories.map((id) => {
          return { id: id };
        });
      }

      //封面
      if (this.articleForm.cover.length == 0) {
        this.$message.warning("至少有一张封面！");
        return;
      }
      //发表文章
      /* 
    1.封装请求函数
    2.引入函数
    3.进行发表请求
     */
      //   addArticle(this.articleForm).then((res) => {
      //     if (res.data.message == "文章发布成功") {
      //       this.$message.success(res.data.message);
      //       this.$router.push("/index/articleList");
      //     } else {
      //       this.$message.error(res.data.message);
      //     }
      //   });

      if (this.$route.query.id) {
        // 编辑文章
        post_update(this.$route.query.id, this.articleForm).then((res) => {
          console.log(241, res);
          if (res.data.message == "文章编辑成功") {
            this.$message.success(res.data.message);
            this.$router.push("/index/articleList");
          } else {
            this.$message.error(res.data.message);
          }
        });
      } else {
        // 新增文章
        addArticle(this.articleForm).then((res) => {
          console.log(241, res);
          if (res.data.message == "文章发布成功") {
            this.$message.success(res.data.message);
            this.$router.push("/index/articleList");
          } else {
            this.$message.error(res.data.message);
          }
        });
      }
    },
  },
};
</script>

<style lang="less" scoped>
.el-card {
  margin-top: 20px;
}
</style>